import React from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

import Header from './components/Header';
import Footer from './components/Footer';
import localRoutes from './routes';
import './app.less';

const App1 = React.lazy(() => import('app1/App'));
const App2 = React.lazy(() => import('app2/App'));

function App() {
    return (
        <BrowserRouter>
            <Header routes={localRoutes} />
            <div>
                <React.Suspense fallback="Loading...">
                    <Routes>
                        <Route path="/app1/*" element={<App1 />} />
                        <Route path="/app2/*" element={<App2 />} />
                        <Route path="*" element={<Navigate to="/app1" replace />} />
                    </Routes>
                </React.Suspense>
            </div>
            <Footer />
        </BrowserRouter>
    );
}

export default App;
